<template>
    <div class="gRemind" v-if='showPop'> 
        <popup v-model="showPop" is-transparent height="100%" position="top">
            <div class="popup1">
                <div class="popup1Top">
                    <div class="popup1TopImg">
                        <p></p>
                        <span>免费开团券</span>
                    </div>
                    <div class="popup1TopText">
                        <p>您当前还有&nbsp;{{allGroupVoucher.length}}&nbsp;次免费开团机会</p>
                    </div>
                </div>    
                <div class="popup1Lists">
                    <div class="popup1List" v-for="item in allGroupVoucher">
                        <div class="popup1ListImg">
                            <img src="../../assets/image/groupPurchase/freeRed.png" alt="" />
                        </div>  
                        <div class="popup1ListInfo">
                            <div class="popup1ListInfoName">
                                <p>{{item.SUBJECT}}</p>
                            </div>    
                            <div class="popup1ListInfoTime">
                                <p>有效期至:&nbsp;{{item.EXP_DATE | filterTimes}}</p>
                            </div>    
                            <div class="popup1ListInfoDesc">
                                <p>{{item.CASH_VOL_RMK}}</p>
                            </div>    
                        </div>    
                    </div>    
                </div>  
                <div class="popup1Btn">                    
                    <div class="popup1BtnInfo" @click='goVoucher'>
                        <p>去开团</p>
                        <img src="../../assets/image/groupPurchase/arrowT.png" alt="" />
                    </div>                                              
                </div>    

                <div class="closePop" @click="closePop">
                    <img src="../../assets/image/closeW.png" alt="" />
                </div>    
            </div>
        </popup>
    </div>
</template>
<script>
    /*开团弹窗提醒*/
    import { XHeader, Popup } from 'vux';
    import { setCookie, getCookie } from '../../util/commonUtils';
    export default {
        name: "gRemind",
        // 数据
        data() {

            return {
                userId: '',
                showPop: false, //是否显示弹窗
                allGroupVoucher:[]
            }
        },
        // 计算属性
        computed: {

        },
        // 创建（实例创建完成）
        created() {
            this.userId = getCookie('loginkey');
            if(sessionStorage.getItem('groupVoucher')){
                this.showPop=false;
            }else{
                if(this.userId){
                    this.getUserAllGroupVoucher();
                }
            }
            
        },
        // el被创建，并挂载到实例上
        mounted() {

        },
        // 方法（实例中的方法）-----------
        methods: {
            closePop() {
                sessionStorage.setItem('groupVoucher',1);
                this.showPop = false;
            },
            //获取用户所有的代金券
            getUserAllGroupVoucher(){
                this.$fetchPost('/CashVolumeWeb/getUserGrouponCashvolByCategory.action',{
                  USER_ID:this.userId
                }).then(res=>{
                  if(res.STATUS_CODE==1){
                    this.allGroupVoucher=res.CASH_VOL_LIST;
                    if(res.CASH_VOL_LIST.length>0){
                        this.showPop=true;
                        sessionStorage.setItem('hasGroupVoucher',1);
                    }else{
                        this.showPop=false;
                    }
                  }
                },err=>{
                  console.log(err);
                })
            },
            goVoucher(){
                this.showPop = false;
                sessionStorage.setItem('groupVoucher',1);
                sessionStorage.setItem('userVoucher',this.allGroupVoucher[0].CASH_VOL_NO);
                location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/freeGroup';
                //this.$router.push('/freeGroup');
            }
        },
        // 子组件
        components: {
            XHeader,
            Popup
        }
    }
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.gRemind {
    .vux-popup-dialog{
      background: rgba(0,0,0,.3)!important;
      z-index: 9999!important;
    }
    background: #fff;
    min-height: 100%;
    .popup1{   
        width: 5.7rem;
        height: 7.6rem;
        background:url('../../assets/image/groupPurchase/groupAlert.png') no-repeat;
        background-size: 5.7rem 7.6rem;
        position: fixed;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);                        
        .popup1Top{
            width: 100%;
            height: 1.4rem;                
            display: flex;
            flex-flow: column;
            .popup1TopImg{    
                margin-top: .3rem;
                position: relative;
                display: flex;
                justify-content:center;
                p{
                    font-size: .26rem;
                    color: #fff;
                    height: 1px;
                    width:4rem;
                    position: absolute;
                    background: #fff;
                    top: 50%;
                    left: 50%;
                    margin-left: -2rem;
                }
                span{
                    font-size: .36rem;
                    color: #fff;
                    background:#FA4F39;
                    position: relative;
                    z-index: 999;
                    padding:0 0.2rem;
                }
            }
            .popup1TopText{
                margin-top: .06rem;
                p{
                    font-size: .25rem;
                    color: #fff;
                }
            }
        }
        .popup1Lists{
            width: 100%;
            height: 4.85rem;
            padding: 0.22rem 0;    
            overflow: scroll;            
            .popup1List{
                width: 4.94rem;
                height: 1.32rem;
                background: url('../../assets/image/groupPurchase/alertTicket.png') no-repeat;
                background-size: 4.94rem 1.32rem;
                margin: 0 auto .16rem;
                display: flex;
                .popup1ListImg{
                    margin-left: .97rem;
                    display: flex;
                    justify-content: center;                        
                    img{                    
                        align-self: center;
                        width: .6rem;
                        height: .56rem;
                    }
                }
                .popup1ListInfo{
                    margin-left: .35rem;
                    .popup1ListInfoName{                             
                        margin-top: .16rem;
                        p{                                
                            font-size: .23rem;
                            color: #f874a0;
                            text-align: left;
                        }
                    }
                    .popup1ListInfoTime{                            
                        p{
                            font-size: .17rem   ;
                            color: #f874a0;
                            text-align: left;
                        }
                    }
                    .popup1ListInfoDesc{
                        margin-top: .12rem;
                        p{
                            font-size: .19rem;
                            color: #f874a0;
                            text-align: left;
                        }
                    }
                }
            }
        }
        .popup1Btn{
            width: 3.62rem;
            height: .72rem;
            margin: .3rem auto;
            border-radius: .3rem;  
            display: flex;
            position: relative;
            .popup1BtnInfo{                    
                display: flex;
                justify-content: center;     
                align-items:center;                                   
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                p{
                    align-self: center;
                    font-size: .31rem;
                    color: #f23e2e;
                    margin-right: .24rem;
                    margin-top: 0.05rem;
                }
                img{
                    display: block;
                    margin-top: 0.05rem;
                    width: .17rem;
                    height: .18rem;
                }
            }               
        }

        .closePop{
            width: 1.2rem;
            height: 1.2rem;
            margin: 0 auto;
            img{
                align-self: center;
                width: .8rem;
                height: .8rem;
            }
        }
    }
}
</style>
